<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>鸿运通官网</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1" data-offset="100">
<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="assets/images/logo.png">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">　首页　</a></li>
                    <li><a href="#part1">关于我们</a></li>
                    <li><a href="#part2">我们的服务</a></li>
                    <li><a href="#part3">功能介绍</a></li>
                    <li><a href="#part5">联系我们</a></li>

                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>
<main data-offset="200">
    <div class="swiper-container visible-xs-block">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="assets/images/b_1.png"/></div>
            <div class="swiper-slide"><img src="assets/images/b_2.png"/></div>
            <div class="swiper-slide"><img src="assets/images/b_3.png"/></div>
        </div>
    </div>
    <div class="swiper-container hidden-xs">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="assets/images/banner_1.png"/></div>
            <div class="swiper-slide"><img src="assets/images/banner_2.png"/></div>
            <div class="swiper-slide"><img src="assets/images/banner_3.png"/></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!--<img class="visible-xs-block" src="鸿运通/1/b_1.png" width="100%"/>-->
    <section>
        <div class="part" id="part1">
            <div class="partInner row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0">
                    <img src="assets/images/product.png" width="100%"/>
                </div>
                <div class="col-xs-10 col-xs-offset-1 col-sm-7 col-sm-offset-0 partText">
                    <div class="title">
                        <p class="titUp">关于我们</p>
                        <p class="titDown">ABOUT US</p>
                    </div>
                    <div class="textIn">
                        <p>
                            鸿讯通软件是信华网络工作室出品，主要为广大行业内人士提供在线交流的平台，实现文字、语音、视频等一对一、一对多的在线沟通平台，本平台集合广大行业内专家、学者包括：金融类、股票类、期货类、投资类等行业人士，本平台为免费试用，本平台提供在线群聊，可创建群聊，用户可登陆平台搜索群号或者群名称直接加入，广告合作请联系在线客服。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="part" id="part2">
            <div class="partbg">
                <div class="partInner">
                    <div class=" partText">
                        <div class="title">
                            <p class="titUp">为什么选择我们</p>
                            <p class="titDown">OUR SERVICE</p>
                        </div>
                        <div class="service row">
                            <div class="col-sm-4">
                                <div class="icon-box">
                                    <div class="s-icon">
                                        <img src="assets/images/ico_1.png"/>
                                    </div>
                                    <span>在线沟通</span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="icon-box center-block">
                                    <div class="s-icon">
                                        <img src="assets/images/ico_2.png"/>
                                    </div>
                                    <span>免费试用</span>
                                </div>
                            </div>
                            <div class="col-sm-4 clearfix">
                                <div class="icon-box pull-right">
                                    <div class="s-icon">
                                        <img src="assets/images/ico_3.png"/>
                                    </div>
                                    <span>专家云集</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="part" id="part3">
            <div class="partInner">
                <div class="partText">
                    <div class="title">
                        <p class="titUp">功能全面</p>
                        <p class="titDown">FUNCTION</p>
                    </div>
                    <div class="function row">
                        <div class="col-sm-4">
                            <p class="funTitle">即时消息/私聊</p>
                            <p class="funText">可通过好友列表在线单聊，基础功能，文字、图片、语音、文件等，满足用户单聊之间的及时沟通。</p>
                            <p class="funTitle marTop">讨论组/群组</p>
                            <p class="funText">用户可根据需要建立群租讨论组，创建方式简便，以便于满足多人的畅聊沟通。</p>
                        </div>
                        <div class="col-sm-4 hidden-xs">
                            <div class="funico-box center-block">
                                <img src="assets/images/funico_1.png" height="125" width="125"
                                     style="position: absolute;top: -5px;left: 64px;">
                                <img src="assets/images/funico_2.png" height="125" width="125"
                                     style="position: absolute;top: 68px;left: -2px;">
                                <img src="assets/images/funico_3.png" height="125" width="125"
                                     style="position: absolute;top: 66px;left: 133px;">
                                <img src="assets/images/funico_4.png" height="125" width="125"
                                     style="position: absolute;top: 138px;left: 66px;">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <p class="funTitle">语音通话交流</p>
                            <p class="funText">既然是聊天，语音功能自然少不了，可实现语音录制发送，在线语音聊天，有效提升传达消息的速度。</p>
                            <p class="funTitle marTop">视频会议沟通</p>
                            <p class="funText">支持在线面对面的视频功能，可一对多进行视频沟通，丰富日常生活乐趣。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="part4">
            <div style="padding-top: 50px;">
                <p>我们为您提供更方便的在线沟通平台</p>
                <p>
                    <small>24小时服务热线：000000000</small>
                </p>
            </div>
        </div>
        <div class="part" id="part5">
            <div class="partInner">
                <div class="partText">
                    <div class="title">
                        <p class="titUp">联系我们</p>
                        <p class="titDown">CONTACT US</p>
                    </div>
                    <div class="contact row">
                        <div class="col-sm-6 conText">
                            <p><img class="c-icon" src="assets/images/tel.png"/>0531-00000000</p>
                            <p><img class="c-icon" src="assets/images/address.png"/>山东省济南市高新区</p>
                            <p><img class="c-icon" src="assets/images/mail.png"/>123456@qq.com</p>
                        </div>
                        <div class="col-sm-6 contMap">
                            <div id="wrap" class="my-map">
                                <div id="mapContainer"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
</main>
<footer>
    <ul>
        <li>友情链接：</li>
        <li><a href="">鸿运通官网</a></li>
        <li><a href="">公司介绍</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
    <p>Copyright © 2013-2018 鸿运通. All Rights Reserved. </p>
</footer>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<!--GaodeMap-->
<script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
<script src="assets/js/gaodemap.js"></script>
<script>
    $(function () {
        $('body').scrollspy({target: '#bs-example-navbar-collapse-1'})//bs滚动监听
        $('.navbar-nav>li').click(function () {
            $('.navbar-nav>li').removeClass("active")
            $(this).addClass("active");
            $('.navbar-collapse').removeClass("in");
        })
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//自动切换
            loop: true,//循环
            direction: 'horizontal',//横向切换
//        grabCursor : true,//鼠标手型
            setWrapperSize: true,//flex布局
            autoHeight: true, //高度随内容变化
            loop: true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            uniqueNavElements: false,
        })
        $(window).scroll(function () {
//        var h = $(window).height()*0.98;//浏览器窗口的高度
            var hh = $(window).scrollTop();//滚动条位置
            if (hh >= 80) {//滚动条位置-窗口高度>=0表示已经置底了
                $('header').addClass("navbar-fixed-top");
            } else {
                $('header').removeClass("navbar-fixed-top");
                $('.navbar-nav>li:first-child').addClass("active");
            }
        })
    })
</script>
</body>
</html>